<template>
  <div>
    <div class="box" v-for="(v, i) in this.$store.state.jkqqarr" :key="i">
      <div class="left"><img :src="v.cover" alt=""></div>
       <div class="right">
           <span class="title">{{v.gname}}</span><br>
           <span class="name">{{v.desc}}</span><br>
           <span class="mianfei">{{v.price}}</span>
           <span class="study">{{v.stu_num}}</span>
       </div>
      <!-- <div class="left"><img :src="v.img" /></div>
      <div class="right">
        <span class="title">{{ v.title }}</span
        ><br />
        <span class="name">{{ v.name }}</span>
        <br>
        <span class="mianfei">{{ v.mianfei }}</span>
        <span class="study">{{ v.study }}</span>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$store.dispatch("jkqqaxioslink", { url: "http://42.192.226.170:8000/api/type/1/" });
    //  this.$store.dispatch("jkqqaxioslink", { url: "/yangyang/jkzi" });
  },
};
</script>

<style scoped>
.box {
  width: 3.45rem;
  height: 1.28rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  /* background-color: chartreuse; */
}
.left {
  width: 0.76rem;
  height: 100%;
  /* background-color: coral; */
}
.left img {
  width: 0.76rem;
  height: 0.89rem;
  margin-top: 0.17rem;
}
.right {
  width: 2.56rem;
  height: 100%;
  /* background-color: cornflowerblue; */
}
.title {
  display: inline-block;
  margin-top: 0.17rem;
}
.name {
  color: #979b9e;
  font-size: 0.15rem;
  background-color: #f2f9ff;
  margin-left: 0.08rem;
}
.mianfei {
  display: inline-block;
  font-size: 0.18rem;
  color: red;
  margin-top: 0.1rem;
}
.study{
  color: #707070;
  margin-left: 1rem;
}
</style>
